<template>
    <div>
        <!-- 导航栏 -->
        <van-nav-bar title="实训云平台" left-text="返回" right-text="首页" left-arrow @click-left="onClickLeft"
            @click-right="onClickRight" :fixed="true" :placeholder="true" />

        <!-- 学生功能栏 -->
        <div style="display:flex">
            <van-dropdown-menu active-color="#1989fa" style="width: 50%;">
                <van-dropdown-item v-model="classId" :options="classInfos" @change="changeClass" />
            </van-dropdown-menu>
            <van-cell title="添加视频" is-link @click="showAddVideo" style="width: 50%; text-align: center;" />
        </div>


        <div v-show="show == 0">
            <div role="button" tabindex="0" index="0" v-for="(item, index) in videos" :item="item"
                @click="intoVideoPlay(item)"
                class="van-cell van-cell--clickable van-cell--center van-cell--borderless van-contact-card van-contact-card--edit">
                <i class="van-icon van-icon-contact van-cell__left-icon" />
                <div class="van-cell__value van-cell__value--alone van-contact-card__value">
                    <div>视频名称:{{ item.videoName }}</div>
                    <div>视频描述:{{ item.content }}</div>
                </div>
                <i class="van-icon van-icon-arrow van-cell__right-icon" />
            </div>
        </div>
        <div v-show="show == 2">
            <van-cell-group>
                <van-field v-model="videoName" label="视频名称" left-icon="smile-o" right-icon="warning-o"
                    placeholder="视频名称" />
                <van-field v-model="content" clearable label="视频描述" left-icon="music-o" placeholder="视频描述" />
            </van-cell-group>
            <van-cell-group style="display:flex;align-items: center;">
                <div style="width:30%;padding:0px 5px">
                    <van-field v-model="content" clearable label="上传视频:"  />
                </div>
                <div style="width:70%">
                    <van-uploader v-model="fileList" :after-read="afterRead" accept=".mp4" :max-count="1"
                    :max-size="100 * 1024 * 1024" />
                </div>
               
            </van-cell-group>



        </div>
        <div v-show="show == 1">
            <video :src="videoUrl" width="100%" controls></video>
            <div style="margin: 16px;">
                <van-button round block type="primary" @click="back">返回列表</van-button>
            </div>
        </div>


        <!-- 加载动画 -->
        <loading v-if="loadingStatus"></loading>
    </div>


</template>
<script>
import req from '../../../request/request'
import { uploadFile } from '../../../request/MyFileReq'
import { Toast } from 'vant';

export default {
    name: '',
    data() {
        return {
            fileList: [],
            classId: 1,
            classInfos: [],
            className: '0',
            videos: [],
            videoUrl: '',
            show: 0,
            videoName: '',
            content: '',

            // 加载动画
            loadingStatus: true,
        };
    },
    methods: {
        afterRead(file) {
            // console.log(file.file)
            var that = this;
            file.status = 'uploading';
            file.message = '上传中...';
            var data = new FormData();
            data.append("file", file.file)
            data.append("videoName", this.videoName)
            data.append("content", this.content)
            data.append("relationGropId", this.$store.state.user.id)
            data.append("status", this.classId)

            uploadFile('/api/addVideo', data, function (e) {
                if (e.data.code == 0) {
                    file.status = 'success';
                    file.message = '上传成功';

                }
                setTimeout(() => {
                    Toast("上传成功")
                    that.back();
                }, 1000);

            })

        },

        showAddVideo() {
            this.show = 2
        },
        back() {
            this.show = 0;
            this.videoUrl = '';
            this.getVideos()
        },
        intoVideoPlay(item) {
            this.show = 1;
            if (item.videoUrl != null) {
                this.videoUrl = "/api/getVideo?url=" + item.videoUrl;
            }
        },
        getVideos() {
            req({
                url: "getVideos",
                method: "POST",
                data: {
                    status: this.classId,
                    relationGroupId: this.$store.state.user.id

                }
            }).then(res => {
                if (res.data.code == 0) {
                    this.videos = res.data.data
                }
            }).catch(err => {
                // console.log(err);
            })
        },
        // 更改班级列表
        changeClass(res) {
            // console.log(res)
            for (var i = 0; i < this.classInfos.length; i++) {
                if (this.classInfos[i].value == res) {
                    this.practiceTitle = this.classInfos[i].text;

                }
                this.getVideos();
            }

        },
        // 获取班级列表
        getTraining() {
            req({
                url: "getTraining",
                method: "POST",
                data: {
                    id: this.$store.state.user.id
                }
            }).then(res => {
                if (res.data.code == 0) {
                    var data = res.data.data;
                    this.classId = res.data.data[0].id;
                    this.practiceTitle = res.data.data[0].practiceTitle;
                    for (var i = 0; i < data.length; i++) {
                        var x = { text: '班级1', value: 0 };
                        x.text = data[i].practiceTitle;
                        x.value = data[i].id;
                        this.classInfos.push(x);
                    }
                    this.getVideos()
                }
            }).catch(err => {
                // console.log(err);
            })
        },
        onClickLeft() {
            if (this.show == 0) {
                this.$router.back(1)
                // console.log("返回首页")
            } else {
                // 返回上一级
                this.back();
            }
        },
        onClickRight() {
            // 回到首页
            this.$router.back(1)
        },
    },

    computed: {
    },
    mounted() {
        this.getTraining()
        setTimeout(async () => {
            this.loadingStatus = false;
        }, 1000);
    },
}
</script>
<style>

    
</style>